<template>
  <div class="my-tag">
    <input
      v-focus
      v-model="msg"
      v-if="edit"
      class="input"
      type="text"
      placeholder="输入标签"
      @keyup.enter="enterEvent"
      @blur="enterEvent"
    />
    <div v-else class="text" @dblclick="divClick">{{ value }}</div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  directives: {
    focus: {
      inserted (dom) {
        dom.focus()
      }
    }
  },
  data () {
    return {
      edit: false,
      msg: ''
    }
  },
  methods: {
    divClick () {
      this.edit = true
      this.msg = this.value
    },
    enterEvent () {
      this.edit = false
      this.$emit('input', this.msg === '' ? '暂无数据' : this.msg)
    }
  }
}
</script>
<style></style>
